<template>
  <div>
    <a-modal title="选择H5活动" width="70%" :visible="visible" @ok="handleOk" @cancel="handleCancel">
      <a-card :bordered="false">
        <div class="search-form-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="6" :sm="24">
                <a-form-item>
                  <a-select v-model="filter.activity_type" placeholder="活动类型">
                    <a-select-option value="1">日常活动</a-select-option>
                    <a-select-option value="2">表单</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item>
                  <a-input placeholder="活动编码" v-model="filter.activity_code" allow-clear></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item>
                  <a-input placeholder="活动名称" v-model="filter.activity_name" allow-clear></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="24">
                <span class="table-page-search-submitButtons">
                  <a-button type="primary" @click="handle">查询</a-button>
                  <a-button style="margin-left: 8px" @click="() => (filter = {})">重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div class="table-box">
          <a-table
            :loading="tableLoading"
            bordered
            :columns="columns"
            :pagination="pagination"
            :data-source="tableData || []"
            :scroll="{ y: 380 }"
            @change="(e) => handle(e)"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          >
            <span slot="verificationStatus" slot-scope="text, record">
              <span :style="{color: realNameTagColors[record.verificationStatus]}">
                {{ text == 1 ?'已认证':'未认证' }}
              </span>
            </span>
          </a-table>
        </div>
      </a-card>
    </a-modal>
    <a-button type="primary" @click="open">选择H5活动</a-button>
  </div>
</template>

<script>
import { activityH5List } from '@/api/market'
export default {
  data () {
    return {
      visible: false,
      tableLoading: false,
      tableData: [],
      pagination: {
        current: 1,
        'show-size-changer': true,
        total: 0
      },
      filter: {
        activity_type: undefined,
        activity_code: '',
        activity_name: '',
        activity_state: '1',
        pageSize: 10,
        pageNum: 1,
      },
      columns: [
        { title: '活动名称', dataIndex: 'activity_name' },
        { title: '活动编码', dataIndex: 'activity_code' },
        { title: '活动类型', dataIndex: 'activity_type_desc' },
        { title: '活动状态', dataIndex: 'activity_state_desc' }
      ],
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  methods: {
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    handle (v) {
      if (v && v.current) {
        if (this.filter.pageSize == v.pageSize) {
          this.pagination.current = v.current
          this.filter.pageNum = v.current
        } else {
          this.filter.pageSize = v.pageSize
          this.filter.pageNum = 1
          this.pagination.current = 1
        }
      } else {
        this.filter.pageNum = 1
        this.filter.pageSize = 10
        this.pagination.current = 1
      }
      this.tableLoading = true
      activityH5List(this.filter)
        .then((res) => {
          this.tableLoading = false
          this.tableData = res.rows
          this.pagination.total = res.total || 0
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    open () {
      this.visible = true
      this.handle()
    },
    handleOk () {
      const len = this.selectedRows.length
      let val = null
      if (this.single && len > 0) {
        val = this.selectedRows[0]
      } else {
        val = this.selectedRows
      }
      this.$emit('change', val)
      this.$emit('input', val)
      this.handleCancel()
    },
    handleCancel () {
      this.visible = false
      this.selectedRows = []
      this.selectedRowKeys = []
      // this.$refs.multipleTable.clearSelection();
    }
  },
  components: {}
}
</script>

<style></style>
